<template>
    <div class="projects flexC-FS-C">
        <template v-if="isPc">
            <div v-if="isSearch" class="search flexR-FS-C">
                <slot name="searchPc" />
            </div>
            <div class="w100" data-aos="fade-up" :data-aos-delay="200">
                <div class="titleBox flexR-FS-C">
                    <el-image class="image" :src="pageIcon" fit="cover" />
                    <span class="">{{ pageTitle }}</span>
                </div>
                <slot name="tablePc" />
            </div>
        </template>

        <template v-else>
            <div class="mobBox flexC-FS-C">
                <el-affix class="mobBox-affix w100" :offset="10">
                    <slot name="searchMob" />
                    <div class="titleBox flexR-FS-C" data-aos="fade-up" data-aos-delay="200" formRefId>
                        <el-image class="image" :src="pageIcon" fit="cover" />
                        <span class="">{{ pageTitle }}</span>
                    </div>
                </el-affix>

                <div class="scroll-div" data-aos="fade-up" data-aos-delay="300">
                    <div ref="scrollRef" class="scrollBox">
                        <div class="left">
                            <template v-if="tableData.length">
                                <slot name="tableMob" />
                            </template>
                            <template v-else>
                                <el-empty data-aos="fade-up" data-aos-delay="300" :image-size="200" />
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </template>
    </div>
</template>

<script setup>
import BScroll from 'better-scroll'
import commonData from '@/hooks/commonData'

const props = defineProps({
    isSearch: {
        type: Boolean,
        default: false
    },
    pageIcon: {
        type: String,
        default: ''
    },
    pageTitle: {
        type: String,
        default: ''
    },
    tableData: {
        type: Array,
        default: () => []
    },
    getList: {
        type: Function,
        default: () => { }
    }
})
const { initAos, isPc, paginationQuery } = commonData()

const scrollRef = ref(null)
let scroll = ''

onMounted(() => {
    initAos()
})

function initScroll() {
    scroll = new BScroll(scrollRef.value, {
        scrollY: true,
        probeType: 3,
        click: true,
        pullUpLoad: true,
        mouseWheel: true
    })
    scroll.on('pullingUp', async () => {
        // 滚动到底部
        if (scroll.y <= (scroll.maxScrollY + 50)) {
            paginationQuery.pageNo++
            props.getList()
        }
    })

    scroll.on('touchEnd', async pos => {
        if (pos.y > 50) {
            console.log('下拉刷新')
            paginationQuery.pageNo = 1
            props.getList('touchEnd')
        }
    })
}

watch(() => props.tableData, newVal => {
    if (!isPc.value) {
        try {
            setTimeout(() => {
                if (scroll) {
                    scroll.finishPullUp()
                    scroll.refresh()
                } else {
                    initScroll()
                }
            }, 300)
        } catch (error) {
            console.log(error)
        }
    }
}, {
    deep: true,
    immediate: true
})
</script>

<style lang='scss' scoped>
[data-mode="pc"] {
    .projects {
        padding: 12px;

        .search {
            width: 100%;
            padding: 13px 0;
            // height: 70px;
            background: #fff;
            box-shadow: 0 3px 13px 0 rgb(187 187 187 / 12%);
            border-radius: 4px;
        }

        .titleBox {
            width: 100%;
            margin: 10px 0;

            .image {
                width: 38px;
                margin-right: 10px;
            }

            span {
                font-size: 14px;
                color: #000;
            }
        }
    }
}

[data-mode="mobile"] {
    .projects {
        width: 100%;
        height: 100vh;
        padding: 0 15px;
        box-sizing: border-box;

        .mobBox {
            width: 100%;
            height: 100%;

            .mobBox-affix {
                width: 100%;
                // height: auto !important;
                flex: 1;
                background-color: #f3f5f6;
                position: relative;
                z-index: 100;
                padding-bottom: 10px;
                box-sizing: content-box;

                .titleBox {
                    width: 100%;
                    margin: 16px 0 10px;

                    .image {
                        width: 34px;
                        margin-right: 10px;
                    }

                    span {
                        font-size: 16px;
                        color: #000;
                    }
                }
            }

            .scrollBox {
                width: 100%;
                margin-top: 10px;
                height: calc(100vh - 113px - 10px - 10px);
            }
        }
    }
}
</style>

<style lang='scss'>
.projects {
    .el-table tr {
        background-color: transparent;
        transition: all 0.3s;
    }

    .selected-row-color {
        color: #0170fe !important;
        box-shadow: rgb(8 61 135 / 30%) 0 0 15px 0;

        .title-span,
        .value-span {
            color: #0170fe !important;
        }
    }
}
</style>
